<script setup lang="ts">
import { EditPen } from "@element-plus/icons-vue";
import TeamMembers from "~/components/TeamMembers.vue";
import { companyMemberPage, getCompanyInfo } from "~/api/user";
import { useUserStore } from "~/store/useUser";
import { useImageCache } from "~/composables/useImageCache";
useSeoMeta({
  title: "企业主页 - 技能猴子",
  ogTitle: "企业主页 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

const user = useUserStore();
const { getCoverImage } = useImageCache();

onMounted(() => {
  getInfo();
  getMemberPage();
});
const companyInfo = ref({});
const getInfo = async () => {
  try {
    const { data } = await getCompanyInfo();
    companyInfo.value = data;
  } catch (e) {
    console.log(e);
  }
};
//员工
const memberPageParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const memberPage = ref([]);
const memberCount = ref(0);
const getMemberPage = async () => {
  try {
    const { data } = await companyMemberPage(memberPageParams.value);
    memberPage.value = data.records;
    memberCount.value = data.total;
  } catch (e) {
    console.log(e);
  }
};
// 是否显示编辑和管理成员
const isShowEdit = computed(() => {
  const duties = memberPage.value.find((item) => item.duties === 1);
  if (duties) {
    const userId = user.getUserInfo.userId;
    return userId === duties.sysUserId;
  }
  return false;
});
</script>

<template>
  <BaseHeaderMenuWhite bg-color="white" />
  <div class="company-home">
    <div class="company-info" v-if="companyInfo.id">
      <img
        class="company-logo"
        v-if="companyInfo.logoList"
        :src="getCoverImage(companyInfo.logoList[0].pic)"
        alt=""
      />
      <div class="info-list">
        <h4>
          <span>{{ companyInfo.name }}</span>
          <NuxtLink v-if="isShowEdit" to="/enterpriseJoin"
            ><el-icon><EditPen /></el-icon> 编辑企业信息</NuxtLink
          >
        </h4>
        <p class="class">
          <span>{{ companyInfo.industry }}</span> <b>|</b>
          <span>{{ companyInfo.staffsMin }}人以上</span> <b>|</b>
          <span>{{
            companyInfo.remoteRatio != "0"
              ? `远程率${companyInfo.remoteRatio}`
              : "尚未远程"
          }}</span>
        </p>
        <p class="tips">{{ companyInfo.introduce }}</p>
      </div>
    </div>
    <div class="team">
      <p class="title">
        <span class="nums">团队成员（{{ memberCount || 0 }}）</span>
        <NuxtLink v-if="isShowEdit" to="/manageMembers" class="to-manage"
          >管理成员</NuxtLink
        >
      </p>
      <div class="list">
        <TeamMembers
          v-for="item of memberPage"
          :key="item.id"
          :dataItem="item"
        />
      </div>
    </div>
  </div>
  <BaseFooter />
</template>

<style scoped lang="scss">
.company-home {
  padding-top: 80px;
  background: #f9f9f9;
  padding-bottom: 20px;
  min-height: 500px;
}
.company-info {
  width: 1100px;
  margin: 32px auto 16px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 32px 24px;
  box-sizing: border-box;
  display: flex;
  .company-logo {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    margin-right: 12px;
  }
  .info-list {
    h4 {
      color: #191e28;
      font-size: 20px;
      margin-bottom: 12px;
      display: flex;
      span {
        flex: 1;
      }
      a {
        color: #019a81;
        font-size: 14px;
        text-decoration: none;
      }
    }
  }
  .class {
    color: rgba(25, 30, 40, 0.48);
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    b {
      color: rgba(25, 30, 40, 0.08);
      padding: 0 5px;
    }
  }
  .tips {
    color: #191e28;
  }
}
.team {
  width: 1100px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 24px;
  box-sizing: border-box;
  margin: 0 auto;
  .title {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    .nums {
      font-size: 16px;
      flex: 1;
      font-weight: bold;
    }
    .to-manage {
      color: #019a81;
      cursor: pointer;
      text-decoration: none;
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
